<template>
  <div class="main" ref="main">
    <header-view :active-index="2"/>
    <div class="category" v-if="categoryList.length > 0">
      <div class="category-list">
        <el-tag size="small" class="category-item" @click="selectAll" :effect="effectAll">全部</el-tag>
        <el-tag size="small" class="category-item" v-for="(category,index) in categoryList" :key="category.categoryId"
                :effect="index === effectIndex ? 'dark' : 'plain'" @click="selectItem(category.categoryId,index)">
          {{ category.categoryName }}
        </el-tag>
      </div>
      <article-page :article-list="articleList" :no-scroll="noScroll"/>
    </div>
    <div v-else style="text-align: center">暂无分类~！</div>
    <footer-view/>
  </div>
</template>

<script>
import HeaderView from '@/components/HeaderView.vue'
import FooterView from '@/components/FooterView.vue'
import ArticlePage from '@/components/ArticlePage.vue'

export default {
  name: 'CategoryView',
  components: {
    HeaderView,
    FooterView,
    ArticlePage
  },
  data () {
    return {
      categoryList: [],
      articleList: [],
      noScroll: false,
      page: 1,
      scrollTop: '',
      clientHeight: '',
      categoryId: '',
      effectAll: 'dark',
      effectIndex: -1
    }
  },
  methods: {
    getCategoryList () {
      this.$http.get('api/category/list').then(data => {
        this.categoryList = data.data
      })
    },
    getArticleList () {
      let url = `api/article/hot/${this.page}`
      if (this.categoryId) {
        url = `api/article/category/${this.categoryId}/${this.page}`
      }
      this.$http.get(url).then(data => {
        if (data.data.current <= data.data.pages) {
          if (this.page === 1) {
            this.articleList = data.data.records
          } else {
            this.articleList.push(...data.data.records)
          }
          this.page++
        } else {
          this.noScroll = true
        }
      })
    },
    selectAll () {
      this.page = 1
      this.noScroll = false
      this.effectIndex = -1
      this.effectAll = 'dark'
      this.categoryId = ''
      this.getArticleList()
    },
    selectItem (categoryId, index) {
      this.page = 1
      this.noScroll = false
      this.categoryId = categoryId
      this.effectAll = 'plain'
      this.effectIndex = index
      this.getArticleList()
    },
    handlerScroll (e) {
      /* 获取滚动条高度 */
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      /* 判断滚动加载文章 */
      if (this.$refs.main.scrollHeight - this.scrollTop === this.clientHeight) {
        if (this.noScroll) {
          e.preventDefault()
        } else {
          this.getArticleList()
        }
      }
    }
  },
  created () {
    this.getCategoryList()
    this.getArticleList()
    this.clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  },
  mounted () {
    window.addEventListener('scroll', this.handlerScroll, true)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handlerScroll)
  }
}
</script>

<style scoped lang="scss">
.main {
  background-color: whitesmoke;

  .category {
    padding-top: 70px;
    min-height: calc(100vh - 150px);
    width: 780px;
    margin: 0 auto;
    background-color: white;

    .category-list {
      display: flex;
      flex-wrap: wrap;

      .category-item {
        margin: 5px;
        cursor: pointer;
      }
    }
  }
}

</style>
